<template>
  <div>
    <div>{{ $route.params.id }}</div>
    <div>
      <div style="width: 33%;float: left" >
        <ve-histogram :data="chartData" height="380px"
                      :settings="chartSettings" :title="{text: '贡献度'}"></ve-histogram>
      </div>
      <div style="width: 33%;float: left">
        <ve-pie :data="chartData" height="380px"
                :settings="commitPieSettings" :title="{text: '提交数'}"></ve-pie>
      </div>
      <div style="width: 33%;float: left">
        <ve-pie :data="chartData" height="380px"
                :settings="modifyPieSettings" :title="{text: '代码数'}"></ve-pie>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

async function getBranchData(branch) {
  let pageNo = 1;
  const pageSize = 100;
  let currentPageSize = 0;
  let data = [];
  do {
    // eslint-disable-next-line no-await-in-loop
    const response = await axios.get(`https://gitee.com/api/v5/repos/${this.owner}/${this.repo}/commits`,
      {
        params: {
          access_token: this.token,
          sha: branch,
          page: pageNo,
          per_page: pageSize,
        },
      });
    currentPageSize = response.data.length;
    data = data.concat(response.data);
    // console.log(pageNo, data);
    pageNo += 1;
  } while (currentPageSize === pageSize);
  // compute begin
  // console.log(data);
  data.forEach((commit) => {
    const loginName = commit.author ? commit.author.login : '';
    if (loginName in this.authors) {
      const author = this.authors[loginName];
      author.commit += 1;
      if (commit.stats.total < 1000) {
        author.modify += commit.stats.total;
      }
    }
  });
  this.chartData.rows = [];
  Object.keys(this.authors).forEach((user) => {
    // console.log(user, authors[user].commit, authors[user].modify);
    const tmp = {
      user: this.authors[user].name,
      commit: this.authors[user].commit,
      modify: this.authors[user].modify,
    };
    this.chartData.rows.push(tmp);
  });
}
async function getData() {
  // https://gitee.com/api/v5/repos/{owner}/{repo}/branches
  const response = await axios.get(`https://gitee.com/api/v5/repos/${this.owner}/${this.repo}/branches`,
    {
      params: {
        access_token: this.token,
      },
    });
  response.data.forEach((branch) => {
    // branches.push(branch.name);
    getBranchData.bind(this)(branch.name);
  });
}

export default {
  name: 'ProjectDetail',
  props: ['project', 'token'],
  data() {
    return {
      authors: { },
      title: {
        text: '123',
        show: true,
      },
      repo: '',
      owner: '',
      chartSettings: {
        title: {
          text: '123',
          show: true,
        },
        // yAxisType: ['KMB', 'percent'],
        axisSite: { right: ['modify'] },
        yAxisName: ['提交数', '代码数'],
      },
      commitPieSettings: {
        dimension: 'user',
        metrics: 'commit',
      },
      modifyPieSettings: {
        dimension: 'user',
        metrics: 'modify',
      },
      chartData: {
        columns: ['user', 'commit', 'modify'],
        rows: [
          // {
          //   user: 'a', commit: 1393, modify: 32,
          // }, {
          //   user: 'b', commit: 1393, modify: 32,
          // }, {
          //   user: 'c', commit: 1393, modify: 32,
          // },
        ],
      },
    };
  },
  mounted() {
    // console.log(this.chartData.rows);
    // console.log(this.project);
    // console.log(this.token);
    const data = this.project.url.split('/');
    // eslint-disable-next-line prefer-destructuring
    const inAuthors = this.project.authors;
    inAuthors.forEach((author) => {
      // console.log(author);
      if (!(author.login instanceof Array)) {
        // eslint-disable-next-line no-param-reassign
        author.login = [author.login];
      }
      if (author.login.length > 0) {
        author.login.forEach((login) => {
          this.authors[login] = {
            name: author.name,
            commit: 0,
            modify: 0,
          };
        });
      }
    });
    // console.log(authors);
    // eslint-disable-next-line prefer-destructuring
    this.owner = data[3];
    // eslint-disable-next-line prefer-destructuring
    this.repo = data[4].split('.')[0];
    getData.bind(this)();
  },
};
</script>

<style scoped>

</style>
